import React from 'react';
import { Tabs, Menu, Dropdown } from 'antd';
import { useModel, history } from 'umi';
import { DownCircleOutlined } from '@ant-design/icons';
import _ from 'lodash';
type PropField = {
  /** 大小，默认为middle*/
  size?: 'small' | 'large' | 'middle';
  /** 标签显示位置，默认为top*/
  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
  /** 标签显示内容*/
  children?: React.ReactNode;
};
const PageHeader: React.FC<PropField> = (props) => {
  const { tabDatas, curPath, delTab, clearOtherTabDatas } = useModel('sysInfo');
  const onRemove = (
    e: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
    action: 'add' | 'remove',
  ) => {
    if (action === 'remove') {
      delTab(e as string);
    }
  };
  const onClick = (key: string) => {
    const rpath = history.location.pathname;
    if (key === '0') {
      delTab(rpath);
    } else if (key === '1') {
      clearOtherTabDatas(rpath);
    }
  };
  const menu = (
    <Menu onClick={(info) => onClick(info.key)}>
      <Menu.Item key="0">
        <div>关闭当前</div>
      </Menu.Item>
      <Menu.Item key="1">
        <div>关闭其它</div>
      </Menu.Item>
    </Menu>
  );
  const tabBarExtraContent = (
    <Dropdown overlay={menu}>
      <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
        <DownCircleOutlined />
      </a>
    </Dropdown>
  );
  return (
    <div style={{ marginTop: 5, marginLeft: 15, marginRight: 15 }}>
      <div>
        {!_.isEmpty(tabDatas) ? (
          <Tabs
            hideAdd
            type="editable-card"
            size={props.size}
            tabPosition={props.tabPosition}
            activeKey={curPath}
            onEdit={onRemove}
            onChange={(key) => history.push(key)}
            tabBarExtraContent={tabDatas.length > 1 ? tabBarExtraContent : null}
          >
            {tabDatas.map((item) => (
              <Tabs.TabPane
                tab={item.tab}
                key={item.key}
                closable={tabDatas.length > 1 ? true : false}
              >
                {!_.isEmpty(props.children) ? props.children : null}
              </Tabs.TabPane>
            ))}
          </Tabs>
        ) : null}
      </div>
    </div>
  );
};
export default PageHeader;
PageHeader.defaultProps = {
  size: 'middle',
  tabPosition: 'top',
};
